<template>
  <div class="my_content">
    <div class="My_title">
      <van-image
        width="100%"
        :src="require('../../assets/image/bg.png')"
        v-if="!isLogin"
      />
      <van-image
        width="100%"
        :src="`http://liufusong.top:8080${userInfo.avatar}`"
        v-else
      />
      <div class="My_info">
        <van-image
          :src="require('../../assets/image/avatar.png')"
          class="header_icon"
        />
        <!-- 未登录 -->
        <div class="vant-btn" v-if="!isLogin">
          <p>游客</p>
          <van-button round type="primary" size="mini" @click="goLogin">
            去登录
          </van-button>
        </div>
        <!-- 已登录 -->
        <div class="vant-btn" v-else>
          <p>{{ userInfo.nickname }}</p>
          <van-button round type="primary" size="mini" @click="goLoginOut">
            退出
          </van-button>
          <div class="person_info">编辑个人资料</div>
        </div>
      </div>
    </div>

    <van-row type="flex" justify="space-between" class="icon_cont">
      <van-col span="8" @click="toCollection">
        <span class="iconfont icon-dituzhaofang"></span>
        <p>我的收藏</p>
      </van-col>
      <van-col span="8" @click="toRend">
        <span class="iconfont icon-dituzhaofang"></span>
        <p>我的出租</p>
      </van-col>
      <van-col span="8">
        <span class="iconfont icon-hezuohuobanxianxing"></span>
        <p>看房记录</p>
      </van-col>
      <van-col span="8">
        <span class="iconfont icon-zufangfenqi"></span>
        <p>成为房主</p>
      </van-col>
      <van-col span="8">
        <span class="iconfont icon-chuzuwu"></span>
        <p>个人资料</p>
      </van-col>
      <van-col span="8">
        <span class="iconfont icon-dituzhaofang"></span>
        <p>联系我们</p>
      </van-col>
    </van-row>
    <div class="pic_big">
      <van-image width="100%" :src="require('../../assets/image/join.png')" />
    </div>
  </div>
</template>

<script>
import { userAPI } from "@/api";
export default {
  name: "my",
  data() {
    return {
      userInfo: {},
    };
  },
  computed: {
    isLogin() {
      return !!this.$store.state.token;
    },
  },
  created() {
    this.userList();
  },

  methods: {
    goLogin() {
      this.$router.push({ path: "/login" });
    },
    async userList() {
      const res = await userAPI();
      this.userInfo = res.data.body;
      console.log(1111, this.userInfo);
    },

    goLoginOut() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确定退出",
        })
        .then(() => {
          // on confirm
          this.$store.commit("SET_TOKEN", "");
        })
        .catch(() => {
          // on cancel
        });
    },
    //我的收藏
    toCollection() {
      if (!this.isLogin) {
        this.$router.push({ path: "/login" });
      } else {
        this.$router.push({ path: "/collection" });
      }
    },
    toRend() {
      if (!this.isLogin) {
        this.$router.push({ path: "/login" });
      } else {
        this.$router.push({ path: "/rentGuanage" });
      }
    },
  },
};
</script>

<style scoped>
.my_content {
  height: 100vh;
  background-color: #fff;
}
.My_title {
  position: relative;
  min-height: 8rem;
}
.My_info {
  position: absolute;
  background: #fff;
  width: 75%;
  height: 55%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px 3px #ddd;
  margin: 1.33rem auto 0;
  padding: 0 0.53rem;
  text-align: center;
  font-size: 0.34rem;
}
.van-image {
  width: 20%;
  border-radius: 50%;
}
.My_info .van-image {
  position: relative;
  transform: translateY(-50%);
  box-shadow: 0 2px 2px #bdbdbd;
}
.vant-btn {
  margin-top: 0.26rem;
  transform: translateY(-40%);
}
.vant-btn .van-button {
  margin-top: 0.26rem;
}
.icon_cont {
  padding: 0 0.26rem;
}
.icon_cont .van-col {
  text-align: center;
  margin-top: 1.06rem;
  color: #333;
}
.icon_cont .iconfont {
  font-size: 0.64rem;
}
.header_icon {
  border: 5px solid #f5f5f5;
}
.pic_big {
  padding: 0 0.26rem;
  margin-top: 1.06rem;
}
:deep(.van-button) {
  width: 1.5rem;
}
.person_info {
  margin-top: 20px;
}
</style>
